2025年9月2日中文

探索 React 的 experimental_useFormStatus 钩子，以简化表单状态管理。了解实现、优势以及在实际示例中的高级用法。

React experimental_useFormStatus 实现：增强表单状态管理

React 不断发展的格局不断引入工具和技术，以改善开发人员的体验和应用程序的性能。其中一项实验性功能是 experimental_useFormStatus 钩子，旨在简化表单状态管理，尤其是在服务器操作和渐进增强方案中。本综合指南将详细探讨 experimental_useFormStatus 钩子，并为其有效利用提供实用的示例和见解。

什么是 `experimental_useFormStatus`？

experimental_useFormStatus 钩子是 React 团队引入的实验性 API，旨在提供一种更直接的方式来跟踪表单提交的状态，尤其是在使用服务器操作时。在此钩子之前，管理表单的不同状态（空闲、提交中、成功、错误）通常需要复杂的state管理逻辑。 experimental_useFormStatus 旨在抽象出大部分复杂性，从而提供一种简单有效的方式来监视表单提交状态并对其做出反应。

主要优点：

简化的状态管理： 减少了管理表单提交状态所需的样板代码。
增强的用户体验： 可以根据表单的状态进行更灵敏的 UI 更新。
提高代码可读性： 使与表单相关的代码更易于理解和维护。
与服务器操作的无缝集成： 旨在与 React 服务器组件和服务器操作配合使用。

基本实现

为了说明 experimental_useFormStatus 的基本实现，让我们考虑一个简单的联系表单示例。此表单将收集用户的姓名、电子邮件和消息，然后使用服务器操作提交它。

先决条件

在深入研究代码之前，请确保您已设置了一个 React 项目，其中包含以下内容：

支持实验性 API 的 React 版本（请查看 React 的文档以获取所需的版本）。
已启用 React 服务器组件（通常在 Next.js 或 Remix 等框架中使用）。

示例：一个简单的联系表单

这是一个基本的联系表单组件：

```jsx // app/actions.js (Server Action) 'use server' export async function submitContactForm(formData) { // Simulate a database call or API request await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Replace with actual API call or database operation console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Client Component) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Name:

Email:

Message:

</div>
      <SubmitButton />
    </form>
  );
}
```

<ul>
  <li><b>服务器操作 (<code>app/actions.js</code>)：</b> 此文件定义了 <code>submitContactForm</code> 函数，该函数是一个服务器操作。 它模拟了一个 2 秒延迟的 API 请求，以演示表单提交的异步性质。 它还处理基本的验证和错误处理。</li>
  <li><b>客户端组件 (<code>app/components/ContactForm.jsx</code>)：</b> 此文件定义了 <code>ContactForm</code> 组件，该组件是一个客户端组件。 它导入了 <code>experimental_useFormStatus</code> 钩子和 <code>submitContactForm</code> 操作。</li>
  <li><b><code>useFormStatus</code> 用法：</b> 在 <code>SubmitButton</code> 组件内部，调用 <code>useFormStatus</code>。 此钩子提供有关表单提交状态的信息。</li>
  <li><b><code>pending</code> 属性：</b> <code>useFormStatus</code> 返回的 <code>pending</code> 属性指示当前是否正在提交表单。 它用于禁用提交按钮并显示“正在提交...”消息。</li>
  <li><b>表单绑定：</b> <code>form</code> 元素的 <code>action</code> 属性绑定到 <code>submitContactForm</code> 服务器操作。 这告诉 React 在提交表单时调用服务器操作。</li>
</ul>

<h2>高级用法和注意事项</h2>

<h3>处理成功和错误状态</h3>

<p>虽然 <code>experimental_useFormStatus</code> 简化了跟踪提交状态，但您通常需要显式处理成功和错误状态。 服务器操作可以返回指示成功或失败的数据，然后您可以使用这些数据相应地更新 UI。</p>

```jsx
// app/components/ContactForm.jsx (Modified)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>消息状态：</b> 引入了 <code>message</code> 状态变量来存储服务器操作返回的结果。</li>
  <li><b>处理结果：</b> 提交表单后，<code>handleSubmit</code> 函数会使用服务器操作的结果更新 <code>message</code> 状态。</li>
  <li><b>显示消息：</b> 该组件根据结果的 <code>success</code> 属性显示消息，为成功和错误状态应用不同的 CSS 类。</li>
</ul>

<p><code>experimental_useFormStatus</code> 在渐进增强方案中表现出色。 通过使用 React 渐进增强标准 HTML 表单，您可以在不牺牲基本功能（如果 JavaScript 失败）的情况下提供更好的用户体验。</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required>

```

然后，您可以使用 React 和 experimental_useFormStatus 逐步增强它。

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Use null as initial state if not relying on it return (

Name:

Email:

Message:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<ul>
  <li><b>初始 HTML 表单：</b> <code>public/contact.html</code> 文件包含一个标准的 HTML 表单，即使没有 JavaScript 也能运行。</li>
  <li><b>渐进增强：</b> <code>EnhancedContactForm</code> 组件逐步增强 HTML 表单。 如果启用了 JavaScript，React 将接管并提供更丰富的用户体验。</li>
  <li><b><code>useFormState</code> 钩子：</b> 使用 <code>useFormState</code> 管理表单状态并将服务器操作绑定到表单。</li>
	<li> <b><code>state</code>：</b> 现在，来自 <code>useFormState</code> 的 <code>state</code> 包含服务器操作的返回值，可以检查该值以获取成功或错误消息。</li>
</ul>

<h3>国际化注意事项</h3>

<p>当为全球受众实施表单时，需要考虑以下几个国际化注意事项：</p>

<ul>
  <li><b>本地化：</b> 确保您的表单标签、消息和错误消息已本地化为不同的语言。 像 i18next 这样的工具可以帮助管理翻译。</li>
  <li><b>日期和数字格式：</b> 根据用户的区域设置处理日期和数字格式。 使用像 <code>Intl</code> 或 <code>moment.js</code>（用于日期格式化，尽管现在被认为是遗留的）这样的库来正确格式化日期和数字。</li>
  <li><b>地址格式：</b> 不同的国家/地区有不同的地址格式。 考虑使用支持多种地址格式的库，或者根据用户的位置创建自定义表单字段。</li>
  <li><b>电话号码验证：</b> 根据国际标准验证电话号码。 像 <code>libphonenumber-js</code> 这样的库可以对此有所帮助。</li>
  <li><b>从右到左 (RTL) 支持：</b> 确保您的表单布局支持像阿拉伯语或希伯来语这样的 RTL 语言。 使用 CSS 逻辑属性（例如，<code>margin-inline-start</code> 而不是 <code>margin-left</code>）以获得更好的 RTL 支持。</li>
  <li><b>可访问性：</b> 遵守可访问性指南 (WCAG)，以确保残疾人士可以使用您的表单，无论他们身在何处。</li>
</ul>

<p><b>示例：本地化的表单标签</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Nom",
    "emailLabel": "Courriel",
    "messageLabel": "Message",
    "submitButton": "Soumettre",
    "successMessage": "Formulaire soumis avec succès !",
    "errorMessage": "Échec de la soumission du formulaire."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>翻译文件：</b> 该示例使用 <code>react-i18next</code> 来管理翻译。 单独的 JSON 文件包含不同语言的翻译。</li>
  <li><b><code>useTranslation</code> 钩子：</b> <code>useTranslation</code> 钩子提供对翻译函数 (<code>t</code>) 的访问，该函数用于检索本地化的字符串。</li>
  <li><b>本地化的标签：</b> 表单标签和按钮文本使用 <code>t</code> 函数检索，确保它们以用户首选的语言显示。</li>
</ul>

<h3>辅助功能注意事项</h3>

<p>确保您的表单对所有用户（包括残疾人士）都可访问至关重要。 以下是一些关键的辅助功能注意事项：</p>

<ul>
  <li><b>语义 HTML：</b> 正确使用语义 HTML 元素，如 <code><label></code>、<code><input></code>、<code><textarea></code> 和 <code><button></code>。</li>
  <li><b>标签：</b> 使用 <code><label></code> 上的 <code>for</code> 属性和表单控件上的 <code>id</code> 属性将标签与表单控件相关联。</li>
  <li><b>ARIA 属性：</b> 使用 ARIA 属性向辅助技术提供更多信息。 例如，使用 <code>aria-describedby</code> 将表单控件链接到描述。</li>
  <li><b>错误处理：</b> 清楚地指示错误并提供有用的错误消息。 使用像 <code>aria-invalid</code> 这样的 ARIA 属性来指示无效的表单控件。</li>
  <li><b>键盘导航：</b> 确保用户可以使用键盘导航表单。 如果需要，可以使用 <code>tabindex</code> 属性来控制焦点顺序。</li>
  <li><b>颜色对比度：</b> 确保文本和背景颜色之间有足够的颜色对比度。</li>
  <li><b>表单结构：</b> 使用清晰一致的表单结构。 使用 <code><fieldset></code> 和 <code><legend></code> 元素对相关的表单控件进行分组。</li>
</ul>

<p><b>示例：可访问的错误处理</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Basic client-side validation
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Name is required.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email is required.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Message is required.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Clear previous errors
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>错误状态：</b> 该组件维护一个 <code>errors</code> 状态来跟踪验证错误。</li>
  <li><b>客户端验证：</b> <code>handleSubmit</code> 函数在提交表单之前执行基本的客户端验证。</li>
  <li><b>ARIA 属性：</b> 如果特定表单控件存在错误，则将 <code>aria-invalid</code> 属性设置为 <code>true</code>。 <code>aria-describedby</code> 属性将表单控件链接到错误消息。</li>
  <li><b>错误消息：</b> 错误消息显示在相应的表单控件旁边。</li>
</ul>

<h2>潜在的挑战和局限性</h2>

<ul>
  <li><b>实验性状态：</b> 作为实验性 API，<code>experimental_useFormStatus</code> 在未来的 React 版本中可能会更改或删除。 必须随时了解 React 的文档，并准备好在必要时调整您的代码。</li>
  <li><b>有限范围：</b> 该钩子主要侧重于跟踪提交状态，不提供全面的表单管理功能，如验证或数据处理。 您可能仍然需要为这些方面实现额外的逻辑。</li>
  <li><b>服务器操作依赖性：</b> 该钩子旨在与服务器操作配合使用，这可能不适合所有用例。 如果您不使用服务器操作，您可能需要寻找替代解决方案来管理表单状态。</li>
</ul>

<p><code>experimental_useFormStatus</code> 钩子在管理 React 中的表单提交状态方面提供了显着改进，尤其是在处理服务器操作和渐进增强时。 通过简化状态管理并提供清晰简洁的 API，它增强了开发人员体验和用户体验。 但是，鉴于其实验性质，必须随时了解未来 React 版本中的更新和潜在更改。 通过了解其优点、局限性和最佳实践，您可以有效地利用 <code>experimental_useFormStatus</code> 在您的 React 应用程序中构建更强大和用户友好的表单。 请记住考虑国际化和辅助功能的最佳实践，以便为全球受众创建包容性表单。</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">表单状态</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React 表单</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">实验性 API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React 钩子</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">表单提交</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">异步表单</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">渐进增强</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

React experimental_useFormStatus 实现：增强表单状态管理

什么是 experimental_useFormStatus？

基本实现

先决条件

示例：一个简单的联系表单

什么是 `experimental_useFormStatus`？